<!--
//
// Trigger.vue
// vue3-element-admin
//
// Created by 区区电脑 on 2023/04/11.
//
-->
<template>
    <div class="Index">
        <!-- 筛选区 -->
        <table-search-bar :config="requestBodyConfig" :model="requestBody" title="基础元素" @search="loadList" />
        <!-- 内容 -->
        <div class="container">
            <!--checkbox设置 :checkbox-config="{trigger: 'row', highlight: true}" -->
            <!--radio设置 :radio-config="{trigger: 'row', highlight: true}" -->
            <vxe-table ref="VXETable" :column-config="{ resizable: false}" :data="state.list" :height="tableHeight" :loading="state.isLoading" :radio-config="{trigger: 'row', highlight: true}" :row-config="{isCurrent: true, isHover: true, keyField: 'id'}" :tree-config="{childrenField: 'children', reserve: true}" border round show-overflow size="small" @current-change="() => {}" @radio-change="() => {}">
                <template #empty>
                    <el-empty :image-size="100" />
                </template>
                <vxe-column fixed="left" title="#" type="seq" width="50" />
                <vxe-column align="left" field="elemSymbol" min-width="140" title="元素符号"></vxe-column>
                <vxe-column align="left" field="elemName" min-width="140" title="元素名称"></vxe-column>
                <vxe-column align="left" field="elemOrder" min-width="140" title="元素序号"></vxe-column>
                <vxe-column field="kab" title="Kab" width="100"></vxe-column>
                <vxe-column field="ka" title="Ka" width="100"></vxe-column>
                <vxe-column field="kaFactor" title="KaFactor" width="100"></vxe-column>
                <vxe-column field="kb" title="Kb" width="100"></vxe-column>
                <vxe-column field="kbFactor" title="KbFactor" width="100"></vxe-column>
                <vxe-column field="lab" title="Lab" width="100"></vxe-column>
                <vxe-column field="la" title="La" width="100"></vxe-column>
                <vxe-column field="laFactor" title="LaFactor" width="100"></vxe-column>
                <vxe-column field="lb" title="Lb" width="100"></vxe-column>
                <vxe-column field="lbFactor" title="LbFactor" width="100"></vxe-column>
                <vxe-column field="ly" title="Ly" width="100"></vxe-column>
                <vxe-column field="ma" title="Ma" width="100"></vxe-column>
                <vxe-column field="kaAddr" title="KaAddr" width="100"></vxe-column>
                <vxe-column field="kbAddr" title="KbAddr" width="100"></vxe-column>
                <vxe-column field="laAddr" title="LaAddr" width="100"></vxe-column>
                <vxe-column field="lbAddr" title="LbAddr" width="100"></vxe-column>
                <vxe-column field="isBd" title="是否标定" width="100">
                    <template #default="{row}">
                        <el-tag v-if="row.isBd" effect="dark">是</el-tag>
                        <el-tag v-else type="info">否</el-tag>
                    </template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted} from "vue";
import {useStore} from "vuex";
import {useRouter} from "vue-router";
import * as api from "./api.js"

const {$message} = window;

const props = defineProps({});
const emits = defineEmits();

// 路由
const router = useRouter();
// store
const store = useStore();
const tableHeight = computed(() => store.getters.layoutType === "mobile" ? "" : store.getters.containerHeight - 155)
// 响应式数据
const state = reactive({
    // 表格数据加载中
    isLoading: false,
    // 表格数据
    list: []
})

// 当前页面功能权限
const permission = {};

// 请求query参数
const requestParams = reactive({
    orderCol: "id",
    isDesc: false,
    pageIndex: 1,
    pageSize: 20,
});
// 请求body参数
const requestBody = reactive({
    elemSymbol: null,
})
// 筛选区域配置
const requestBodyConfig = reactive({
    elemSymbol: {label: "元素符号", component: "el-input"},
    // code: {label: "编号", component: "el-input", inMore: true},
    //sort: {label: "排序", component: "el-select", data: [{name: "1", value: 1}, {name: "2", value: 2}], inMore: true},
    //createdTime: {label: "创建时间", component: "el-date-picker", format: "YYYY-MM-DD", inMore: true},
    //updateTime: {label: "更新时间", component: "el-date-picker-datetime", format: "YYYY-MM-DD HH:mm:ss", inMore: true}
})
// 分页配置
const pageConfig = reactive({
    total: 0,
    sizes: [10, 20, 50, 100, 200]
})


// 查询列表
async function loadList() {
    const body = {
        ...requestBody
    }
    body.elemSymbol = body.elemSymbol?.toLowerCase()
    state.isLoading = true;
    const {success, data} = await api.GetBaseElemList(body);
    state.isLoading = false;
    if (!success) return 0;
    state.list = data || [];
}

onMounted(() => {
    loadList()
})
</script>

<style lang="scss" scoped>
.Index {
    margin: 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;

    .container {
        padding: 10px;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.1);
    }
}
</style>
